<template>
  <div class="box-wrapper">
    <div id="popup" ref="el" class="box">
      <div
        style="background-size: 100% 100%"
        :style="{ backgroundImage: `url('${bkg}')` }"
        class="popup-box"
      >
        <div class="box-header">
          <div class="title">设备详情</div>
          <!-- <close-icon size="20px" style="width: 20px; height: 20px"></close-icon> -->
        </div>
        <div class="box-content">
          <div
            v-for="(item, key) in propData"
            class="box-content-item"
            :key="key"
          >
            <div class="box-content-item-key">{{ item.label }}:</div>
            <div class="box-content-item-value">{{ item.value }}</div>
          </div>
        </div>
        <!-- <div class="box-bottom">
          <div class="box-bottom-button">拨打电话</div>
          <div class="box-bottom-button">视频通话</div>
          <div @click="openChatBoard" class="box-bottom-button">即时通信</div>
        </div> -->
      </div>
    </div>
    <div class="blue-dot"></div>
    <chatBoard
      @close="() => (showChat = false)"
      v-model:show="showChat"
    ></chatBoard>
  </div>
</template>

<script lang="ts" setup>
import chatBoard from "../../chat-board/index.vue";
import bkg from "../../../assets/person-info/bkg.png";
import { ref } from "vue";
const props = defineProps({
  lon: {
    type: Number,
    default: 0,
  },
  lat: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
  },
  propData: {
    type: Object as any,
    default: () => {
      return [];
    },
  },
});
const showChat = ref(false);
const openChatBoard = () => {
  showChat.value = true;
};
</script>

<style>
.mapboxgl-popup-content {
  position: relative;
  background: none;
  /* pointer-events: none; */
  padding: 0;
}

.mapboxgl-popup-tip {
  display: none;
}

.mapboxgl-popup-close-button {
  color: #fff !important;
  font-size: 20px;
}

.mapboxgl-ctrl-bottom-left {
  display: none;
}

.mapboxgl-ctrl-group {
  background: #c6c9d0d4;
}

.mapbox-gl-draw_line,
.mapbox-gl-draw_polygon,
.mapbox-gl-draw_point,
.mapbox-gl-draw_trash,
.mapbox-gl-draw_combine,
.mapbox-gl-draw_uncombine {
  display: none !important;
}
</style>
<style lang="scss" scoped>
.box-wrapper {
  position: relative;
}
.svg-wrapper {
  position: absolute;
}
.help-line-1 {
  position: absolute;
  width: 120px;
  height: 1px;
  background-color: gold;
  left: 138px;
  top: 129px;
  transform: rotate(45deg);
}
.help-line-2 {
  position: absolute;
  width: 60px;
  height: 1px;
  background-color: gold;
  left: 240px;
  top: 171px;
}
.box {
  position: absolute;
  width: 314px;
  border-radius: 5px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
  z-index: 10;
  left: -150px;
  top: -120px;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  animation: flow 0.3s ease;
}
.popup-box {
  background-color: rgba(0, 0, 0, 0.3);
  height: 300px;
  //   transform: translate(0px, -213px);
  margin-top: -213px;
}
.box-bottom {
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.box-bottom-button {
  background-color: rgba(255, 255, 255, 0.1);
  margin-right: 15px;
  font-size: 14px;
  padding: 5px;
  cursor: pointer;
  user-select: none;
}
.box-bottom-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.box-bottom-button:active {
  color: grey;
}
@keyframes flow {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
.blue-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  z-index: 11;
  position: absolute;
  background-color: #0065ff;
  margin-left: -4px;
  margin-top: -4px;
}
.blue-dot-box {
  left: -150px;
  top: -100px;
}
.box-header {
  cursor: grab;
  box-sizing: border-box;
  padding: 18px 20px;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  color: #fff;
  .title {
    font-weight: bold;
    font-style: italic;
    font-size: 18px;
    color: transparent;
    /*定义背景渐变*/
    background-image: linear-gradient(to bottom, #fff, #00bfff);
    /*添加-webkit-background-clip，保证渐变生效*/
    -webkit-background-clip: text;
    background-clip: text;
    width: 120px;
  }
}
.box-content {
  color: #fff;
  height: 215px;
  border-radius: 5px;
  padding: 20px 10px;
  box-sizing: border-box;
  overflow-y: scroll;
  &-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 10px;
    &-key {
      margin-right: 5px;
      font-size: 14px;
      color: rgba(74, 141, 215, 1);
    }
    &-value {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
